<template>
  <template v-if="!!menuList.children && menuList.children.length > 0">
    <template v-for="titem in menuList.children">
      <!-- 如果子级还有子级 -->
      <template v-if="!!titem.children && titem.children.length > 0">
        <Submenu :name="titem.id">
          <template #title>
            <span>{{titem.name}}</span>
          </template>
          <!--循环子级 -->
          <recursionNav :navData="titem" />
        </Submenu>
      </template>
      <!-- 没有子集 直接渲染 -->
      <template v-else>
<!--        :to="titem.menuUrl" :target="!!titem.target ? titem.target :''"-->
        <MenuItem :name="titem.menuUrl">
          <span>{{titem.name}}</span>
        </MenuItem>
      </template>
    </template>
  </template>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import {getMenu} from "@/util/getMenu";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


// import recursionNav from "../views/recursionNav.vue";//菜单



//reactive
export default defineComponent({
  name: 'recursionNav',//组件名称
  components: {
    // recursionNav,
  },//组件引用
  props:['navData'],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $common = inject('$common');//自己封装的方法
    const router = useRouter();//路由跳转使用


    const state = reactive({
      menuList:[],//菜单数据
      current:'',
    });




    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      state.menuList = props.navData

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      props,
    }
  }
})


</script>
<style lang="less">
._wz_iviewNav{


}
</style>
